<template>
  <div class="swiper">
      <img v-bind:src="arr[count]" alt="">
      <ul>
          <li v-for="(item , index) in img.length" v-bind:key="index" v-bind:class="index === count? 'active' : '' " v-on:click="click(index)">

          </li>
      </ul>
      <p class="left" v-on:click="left">
          ◀
      </p>
      <p class="right" v-on:click="right">
          ▶
      </p>
  </div>
</template>

<script>
export default {
    props:['arr'],
    data(){
        return{
            count:0,
            img:[
                'img/tu1.jpg',
                'img/tu2.jpg',
                'img/tu3.jpg',
                'img/tu4.jpg',
                'img/tu5.jpg',
            ]
        }
    },
    methods:{
        left(){
            this.count--;
            if(this.count < 0){
                this.count = this.img.length-1;
            }
        },
        right(){
            this.count++;
            if(this.count > this.img.length-1){
                this.count = 0;
            }
        },
        click(index){
            this.count = index
        }
    }
}
</script>

<style>
    .swiper{
        width:1000px;
        margin:0 auto;
        position:relative;
    }
    .swiper img{
        width:100%;
        display:block;
    }
    .swiper ul{
        display:flex;
        position:absolute;
        bottom:20px;
        left:calc(50% - 50px);
    }
    .swiper ul li{
        width:20px;
        height:20px;
        border-radius:50%;
        background:#ebeff2;
        opacity:0.6;
        margin: 0 10px;
    }
    .left , .right{
        position:absolute;
        width:100px;
        height:120px;
        background:rgb(134, 133, 133);
        opacity: 0.5;
        font-size:100px;
        text-align:center;
        line-height:120px;
        top:120px;
        border-radius:20px;
    }
    .left{
        left:-120px;
    }
    .right{
        right:-120px;
    }
    .active{
        opacity:1 !important;
        background:#fff !important;
    }
</style>